<template>
  <div class="container">
    <!-- 搜索栏 -->
    <div class="search">
      <el-form ref="form" :model="form" label-width="120px" inline>
        <el-form-item label="设备ID名称" prop="value">
          <el-select v-model="form.value" placeholder="请选择查询监控设备号">
            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="在线状态" prop="value">
          <el-select v-model="form.state" placeholder="请选择在线状态">
            <el-option label="在线" :value="1"></el-option>
            <el-option label="离线" :value="0"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item class="search_btn">
          <el-button type="primary" size="medium">图表</el-button>
          <el-button size="medium">列表</el-button>
        </el-form-item>
      </el-form>
    </div>
    <!-- 图表 -->
    <div class="card_panel">
      <el-row :gutter="20">
        <el-col :xs="12" :sm="12" :lg="6" v-for="(item, index) in enList" :key="index">
          <div class="card_panel_list">
            <div class="card_panel_top">
              <div class="card_panel_title">
                土壤测报
              </div>
              <el-divider />
              <el-descriptions :column="1" :label-style="{'color': '#999999' }">
                <el-descriptions-item>
                  <template slot="label">
                    <img src="@/assets/images/equipment.png" alt="" style="padding-right: 5px; margin:auto 0">
                    设备名称
                  </template>{{item.name}}
                </el-descriptions-item>
                <el-descriptions-item>
                  <template slot="label">
                    <img src="@/assets/images/id.png" alt="" style="padding-right: 5px; margin:auto 0">
                    设备ID
                  </template>{{item.id}}
                </el-descriptions-item>
                <el-descriptions-item contentStyle="color:#1BBC8B">
                  <template slot="label">
                    <img src="@/assets/images/computer.png" alt="" style="padding-right: 5px; margin:auto 0">
                    设备状态
                  </template>{{item.state===0 ? "离线" : '在线'  }}
                </el-descriptions-item>
                <el-descriptions-item>
                  <template slot="label">
                    <img src="@/assets/images/time.png" alt="" style="padding-right: 5px;  margin:auto 0">
                    最新上报时间
                  </template>{{item.time}}
                </el-descriptions-item>
                <el-descriptions-item>
                  <template slot="label">
                    <img src="@/assets/images/address.png" alt="" style="padding-right: 5px; margin:auto 0">
                    地址
                  </template>{{item.address}}
                </el-descriptions-item>
              </el-descriptions>
              <div class="card_panel_bottom">
                <a href="">历史数据</a>
              </div>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>
    <!-- 列表 -->
    <div></div>
  </div>
</template>
<style lang="scss" scoped>
.container {
  padding: 24px;
  background-color: rgb(240, 242, 245);
  .search {
    padding: 32px 0;
    height: 100px;
    margin-bottom: 15px;
    background-color: #fff;
    border-radius: 8px;
    .search_btn {
      float: right;
      padding-right: 40px;
      .el-button--primary {
        background: #4362ff;
        border-color: #4362ff;
      }
      .el-button--default {
        color: #4362ff;
        border-color: #4362ff;
      }
    }
  }
  .card_panel {
    height: 1040px;
    .card_panel_list {
      margin: 15px 0;
      height: 350px;
      background: #fff;
      box-shadow: 0 3px 6px 1px rgba(67, 98, 255, 0.2);
      border-radius: 10px;
      position: relative;
      .card_panel_top {
        padding: 25px 20px;
        .card_panel_title {
          border-left: 5px solid #4362ff;
          padding-left: 5px;
          font-size: 16px;
          font-weight: bold;
        }
      }
      .card_panel_bottom {
        padding: 20px 30px;
        width: 100%;
        font-size: 16px;
        text-align: center;
        position: absolute;
        left: 0;
        bottom: 0;
        color: #4362ff;
        background: #f5f8ff;
        border-radius: 0 0 10px 10px;
        a {
          img {
            padding-right: 5px;
          }
        }
      }
    }
  }
}
</style>
